<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>摄像机视频列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../static/lib/layui-v2.6.3/css/layui.css" media="all" >
    <link rel="stylesheet" href="../static/css/public.css" media="all">
    <style>
        .container {
            display: flex;
        }
        .left-div {
            width: 400px;
        }
        .right-div {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; /* 使子元素平均分配容器的剩余空间 */
        }
        .wfsjs video {
            box-sizing: border-box;
            border: 2px solid #343434; /* 设置边框颜色 */
            background-color: rgb(76, 75, 75); /* 设置背景颜色 */
            width: calc(33.33% - 10px); /* 计算出每个视频标签的宽度，减去间距 */
            height: calc(33.33% - 10px); /* 计算出每个视频标签的高度，减去间距 */
            margin-bottom: 10px; /* 为了添加间距，这里设置下边距 */
        }
        /*云台*/
        .ptz
        {
            width:350px;
            padding:10px;
            margin-left:10px;
            border:1px solid #7F9DB9;
        }
        .ptz .tt
        {
            width:60px;
        }
        .ptz .btn
        {
            width:45px;
            height:22px;
            line-height:18px;
            margin-top: 10px;
        }
        .ptz .btn2
        {
            width:60px;
            height:22px;
            line-height:18px;
            margin-left: 10px;
            margin-top: 10px;
        }
        .left
        {
            float:left;
            margin-left: 10px;
        }
        .right-div video.selected-video {
            border: 2px solid rgb(255, 204, 0); /* 设置选中状态下的边框颜色 */
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left-div">
        <!--<script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="logoutPlayView"> 退出预览 </button>
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="logoutPlayViewAll"> 退出所有预览 </button>
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="fullScreen"> 全屏 </button>
            </div>
        </script>-->
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        <fieldset class="ptz">
            <legend>控制台</legend>
            <button id="logoutPlayView" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="logoutPlayView"> 退出预览 </button>
            <button id="logoutPlayViewAll" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="logoutPlayViewAll"> 退出所有预览 </button>
            <button id="fullScreen" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="fullScreen"> 全屏 </button>
        </fieldset>
        <fieldset class="ptz">
            <legend>云台控制</legend>
            <table cellpadding="0" cellspacing="3" border="0" class="left">
                <tr>
                    <td>
                        <input type="button" class="btn" value="左上" onmousedown="playControlStart(UP_LEFT);" onmouseup="playControlStop(UP_LEFT);" />
                        <input type="button" class="btn" value="上" onmousedown="playControlStart(TILT_UP);" onmouseup="playControlStop(TILT_UP);" />
                        <input type="button" class="btn" value="右上" onmousedown="playControlStart(UP_RIGHT);" onmouseup="playControlStop(UP_RIGHT);" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" class="btn" value="左" onmousedown="playControlStart(PAN_LEFT);" onmouseup="playControlStop(PAN_LEFT);" />
                        <input type="button" class="btn" value="自动" onclick="playControlStart(PAN_AUTO);" />
                        <input type="button" class="btn" value="右" onmousedown="playControlStart(PAN_RIGHT);" onmouseup="playControlStop(PAN_RIGHT);" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" class="btn" value="左下" onmousedown="playControlStart(DOWN_LEFT);" onmouseup="playControlStop(DOWN_LEFT);" />
                        <input type="button" class="btn" value="下" onmousedown="playControlStart(TILT_DOWN);" onmouseup="playControlStop(TILT_DOWN);" />
                        <input type="button" class="btn" value="右下" onmousedown="playControlStart(DOWN_RIGHT);" onmouseup="playControlStop(DOWN_RIGHT);" />
                    </td>
                </tr>
            </table>
            <table cellpadding="0" cellspacing="3" border="0" class="left">
                <tr>
                    <td class="tt"><input type="button" class="btn2" value="变倍+" onmousedown="playControlStart(ZOOM_IN)" onmouseup="playControlStop(ZOOM_IN)"></td>
                    <td><input type="button" class="btn2" value="变倍-" onmousedown="playControlStart(ZOOM_OUT)" onmouseup="playControlStop(ZOOM_OUT)"></td>
                </tr>
                <tr>
                    <td class="tt"><input type="button" class="btn2" value="变焦+" onmousedown="playControlStart(FOCUS_NEAR)" onmouseup="playControlStop(FOCUS_NEAR)"></td>
                    <td><input type="button" class="btn2" value="变焦-" onmousedown="playControlStart(FOCUS_FAR)" onmouseup="playControlStop(FOCUS_FAR)"></td>
                </tr>
                <tr>
                    <td class="tt"><input type="button" class="btn2" value="光圈+" onmousedown="playControlStart(IRIS_OPEN)" onmouseup="playControlStop(IRIS_OPEN)"></td>
                    <td><input type="button" class="btn2" value="光圈-" onmousedown="playControlStart(IRIS_CLOSE)" onmouseup="playControlStop(IRIS_CLOSE)"></td>
                </tr>
            </table>
        </fieldset>
    </div>
    <div class="right-div wfsjs">
        <video id="video1" muted="muted" data-user-id="" data-play-id="" data-username="" data-password="" data-ip="" data-port="" style="width: 33%; height: 33%;" autoplay="autoplay"></video>
        <video id="video2" muted="muted" data-user-id="" data-play-id="" data-username="" data-password="" data-ip="" data-port="" style="width: 33%; height: 33%;" autoplay="autoplay"></video>
        <video id="video3" muted="muted" data-user-id="" data-play-id="" data-username="" data-password="" data-ip="" data-port="" style="width: 33%; height: 33%;" autoplay="autoplay"></video>
        <video id="video4" muted="muted" data-user-id="" data-play-id="" data-username="" data-password="" data-ip="" data-port="" style="width: 33%; height: 33%;" autoplay="autoplay"></video>
        <video id="video5" muted="muted" data-user-id="" data-play-id="" data-username="" data-password="" data-ip="" data-port="" style="width: 33%; height: 33%;" autoplay="autoplay"></video>
        <video id="video6" muted="muted" data-user-id="" data-play-id="" data-username="" data-password="" data-ip="" data-port="" style="width: 33%; height: 33%;" autoplay="autoplay"></video>
        <video id="video7" muted="muted" data-user-id="" data-play-id="" data-username="" data-password="" data-ip="" data-port="" style="width: 33%; height: 33%;" autoplay="autoplay"></video>
        <video id="video8" muted="muted" data-user-id="" data-play-id="" data-username="" data-password="" data-ip="" data-port="" style="width: 33%; height: 33%;" autoplay="autoplay"></video>
        <video id="video9" muted="muted" data-user-id="" data-play-id="" data-username="" data-password="" data-ip="" data-port="" style="width: 33%; height: 33%;" autoplay="autoplay"></video>
    </div>
</div>
<script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="loginAndPlayView1">预览通道一</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="loginAndPlayView2">预览通道二</a>
</script>
<script src="../static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../static/js/wfs.js"></script>
<script src="../static/js/jquery-3.4.1.min.js"></script>
<script>
    const PAN_AUTO = "PAN_AUTO";
    const ZOOM_IN = "ZOOM_IN";
    const ZOOM_OUT = "ZOOM_OUT";
    const FOCUS_NEAR = "FOCUS_NEAR";
    const FOCUS_FAR = "FOCUS_FAR";
    const IRIS_OPEN = "IRIS_OPEN";
    const IRIS_CLOSE = "IRIS_CLOSE";
    const TILT_UP = "TILT_UP";
    const TILT_DOWN = "TILT_DOWN";
    const PAN_LEFT = "PAN_LEFT";
    const PAN_RIGHT = "PAN_RIGHT";
    const UP_LEFT = "UP_LEFT";
    const UP_RIGHT = "UP_RIGHT";
    const DOWN_LEFT = "DOWN_LEFT";
    const DOWN_RIGHT = "DOWN_RIGHT";
    // 在全局范围定义一个变量用于存储选中的 video 元素
    var selectedVideo = null;
    function playControlStart(command) {
        if (selectedVideo === null) {
            layer.alert('请选择一个窗口', function (index) {
                layer.close(index);
            });
        } else {
            var video = document.getElementById(selectedVideo.id);
            var userId = video.getAttribute("data-play-id");
            var playId = video.getAttribute("data-user-id");
            var ip = video.getAttribute("data-ip");
            var port = video.getAttribute("data-port");
            var username = video.getAttribute("data-username");
            var password = video.getAttribute("data-password");
            if (userId.length > 0 && playId.length > 0) {
                $.ajax({
                    url:  "/hkCamera/playControlStart",    //请求的url地址
                    dataType: "json",   //返回格式为json
                    async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                    data: {
                        username: username,
                        password: password,
                        ip: ip,
                        port: port,
                        command: command
                    },    //参数值,键值对
                    type: "POST",   //请求方式
                    success: function (res) {
                        if (res.code  === 0) {
                        }
                    },
                    error: function () {
                    }
                })
            } else {
                layer.msg("该窗口未有视频播放");
            }
        }
    }

    function playControlStop(command) {
        if (selectedVideo === null) {
            layer.alert('请选择一个窗口', function (index) {
                layer.close(index);
            });
        } else {
            var video = document.getElementById(selectedVideo.id);
            var userId = video.getAttribute("data-play-id");
            var playId = video.getAttribute("data-user-id");
            var ip = video.getAttribute("data-ip");
            var port = video.getAttribute("data-port");
            var username = video.getAttribute("data-username");
            var password = video.getAttribute("data-password");
            if (userId.length > 0 && playId.length > 0) {
                $.ajax({
                    url:  "/hkCamera/playControlStop",    //请求的url地址
                    dataType: "json",   //返回格式为json
                    async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                    data: {
                        username: username,
                        password: password,
                        ip: ip,
                        port: port,
                        command: command
                    },    //参数值,键值对
                    type: "POST",   //请求方式
                    success: function (res) {
                        if (res.code  === 0) {
                        }
                    },
                    error: function () {
                    }
                })
            } else {
                layer.msg("该窗口未有视频播放");
            }
        }
    }

    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        // 点击事件监听器
        $(".right-div video").click(function () {
            // 移除所有视频标签的边框样式
            $(".right-div video").removeClass("selected-video");
            // 将当前点击的视频标签添加边框样式
            $(this).addClass("selected-video");
            // 设置全局变量为选中的视频标签
            selectedVideo = this;
        });

        table.render({
            elem: '#currentTableId',
            url: '/camera/list',
            //toolbar: '#toolbarDemo',
            defaultToolbar: [],
            cols: [[
                {field: 'id', width: 100, title: 'ID',hide: true},
                {field: 'cameraId', width: 200, title: '球机ID',hide: true},
                {field: 'cameraName', width: 120, title: '球机名称'},
                {field: 'ip', width: 120, title: 'IP',hide: true},
                {field: 'port', width: 120, title: '端口',hide: true},
                {field: 'username', width: 120, title: '用户名',hide: true},
                {field: 'password', width: 120, title: '密码',hide: true},
                {field: 'enable', width: 120, title: '是否自动',hide: true,
                    templet: function(d) {
                        if (d.enable === 0) {
                            return '自动';
                        } else if (d.enable === 1) {
                            return '手动';
                        } else {
                            return "";
                        }
                    }
                },
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line',
            width: 400,
            height: 667
        });

        /**
         * toolbar监听事件
         */
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'loginAndPlayView1') {
                if (selectedVideo === null) {
                    layer.alert('请选择一个窗口', function (index) {
                    layer.close(index);
                    });
                } else {
                    var video = document.getElementById(selectedVideo.id);
                    var userId = video.getAttribute("data-play-id");
                    var playId = video.getAttribute("data-user-id");
                    if (userId.length > 0 && playId.length > 0) {
                        layer.alert("当前窗口正在预览，请另选窗口");
                    } else {
                        var loginVo = {
                            "username": data.username,
                            "password": data.password,
                            "ip": data.ip,
                            "port": data.port,
                            "channelId": 1,
                        };
                        $.ajax({
                            url:  "/hkCamera/loginAndPlayView",    //请求的url地址
                            dataType: "json",   //返回格式为json
                            contentType: "application/json",
                            async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                            data: JSON.stringify(loginVo),    //参数值,键值对
                            type: "POST",   //请求方式
                            success: function (res) {
                                if (res.code && res.data && res.data.loginStatus === "1") {
                                    var userId = res.data.userId;
                                    var playId = res.data.playId;
                                    // 设置自定义属性值
                                    selectedVideo.setAttribute("data-play-id", playId);
                                    selectedVideo.setAttribute("data-user-id", userId);
                                    selectedVideo.setAttribute("data-username", res.data.username);
                                    selectedVideo.setAttribute("data-password", res.data.password);
                                    selectedVideo.setAttribute("data-ip", res.data.ip);
                                    selectedVideo.setAttribute("data-port", res.data.port);
                                    var video = document.getElementById(selectedVideo.id);
                                    if (Wfs.isSupported()) {
                                        //var video = document.getElementById("video1");
                                        var wfs = new Wfs();
                                        wfs.attachMedia(video, userId + "_" + playId, "H264Raw", userId);    //绑定video标签
                                        //调试视频标签播放速度
                                        video.playbackRate = 1.50;
                                    }
                                } else {
                                    layer.alert("播放失败，错误信息：" + ((res.data && res.data.loginMessage) ? res.data.loginMessage : ""))
                                }
                            },
                            error: function () {
                            }
                        })
                    }
                }
            } else if (obj.event === 'loginAndPlayView2') {
                if (selectedVideo === null) {
                    layer.alert('请选择一个窗口', function (index) {
                        layer.close(index);
                    });
                } else {
                    var video = document.getElementById(selectedVideo.id);
                    var userId = video.getAttribute("data-play-id");
                    var playId = video.getAttribute("data-user-id");
                    if (userId.length > 0 && playId.length > 0) {
                        layer.alert("当前窗口正在预览，请另选窗口");
                    } else {
                        var loginVo = {
                            "username": data.username,
                            "password": data.password,
                            "ip": data.ip,
                            "port": data.port,
                            "channelId": 2,
                        };
                        $.ajax({
                            url:  "/hkCamera/loginAndPlayView",    //请求的url地址
                            dataType: "json",   //返回格式为json
                            contentType: "application/json",
                            async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                            data: JSON.stringify(loginVo),    //参数值,键值对
                            type: "POST",   //请求方式
                            success: function (res) {
                                if (res.code && res.data && res.data.loginStatus === "1") {
                                    var userId = res.data.userId;
                                    var playId = res.data.playId;
                                    // 设置自定义属性值
                                    selectedVideo.setAttribute("data-play-id", playId);
                                    selectedVideo.setAttribute("data-user-id", userId);
                                    selectedVideo.setAttribute("data-username", res.data.username);
                                    selectedVideo.setAttribute("data-password", res.data.password);
                                    selectedVideo.setAttribute("data-ip", res.data.ip);
                                    selectedVideo.setAttribute("data-port", res.data.port);
                                    var video = document.getElementById(selectedVideo.id);
                                    if (Wfs.isSupported()) {
                                        //var video = document.getElementById("video1");
                                        var wfs = new Wfs();
                                        wfs.attachMedia(video, userId + "_" + playId, "H264Raw", userId);    //绑定video标签
                                        //调试视频标签播放速度
                                        video.playbackRate = 1.50;
                                    }
                                } else {
                                    layer.alert("播放失败，错误信息：" + ((res.data && res.data.loginMessage) ? res.data.loginMessage : ""))
                                }
                            },
                            error: function () {
                            }
                        })
                    }
                }
            }
        });

        $("#logoutPlayView").click(function () {
            if (selectedVideo === null) {
                layer.alert('请选择一个窗口', function (index) {
                    layer.close(index);
                });
            } else {
                var video = document.getElementById(selectedVideo.id);
                var userId = video.getAttribute("data-play-id");
                var playId = video.getAttribute("data-user-id");
                if (userId.length > 0 && playId.length > 0) {
                    $.ajax({
                        url:  "/hkCamera/logoutPlayView",    //请求的url地址
                        dataType: "json",   //返回格式为json
                        async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                        data: {
                            userId: userId,
                            playId: playId
                        },    //参数值,键值对
                        type: "GET",   //请求方式
                        success: function (res) {
                            if (res.code  === 200) {
                                layer.msg("退出成功");
                                video.setAttribute("data-play-id", "");
                                video.setAttribute("data-user-id", "");
                                video.setAttribute("data-username", "");
                                video.setAttribute("data-password", "");
                                video.setAttribute("data-ip", "");
                                video.setAttribute("data-port", "");
                                video.pause(); // 暂停视频播放
                                video.src = ""; // 将视频源设置为空字符串
                                //video.load();  // 重新加载视频
                            }
                        },
                        error: function () {
                        }
                    })
                } else {
                    layer.msg("该窗口未有视频播放");
                }
            }
        })

        $("#logoutPlayViewAll").click(function () {
            var logoutPlayViewListVo = [];
            // 获取所有 video 元素
            var videoElements = document.querySelectorAll('.right-div video');
            // 遍历每个 video 元素
            videoElements.forEach(function (videoElement) {
                var userId = videoElement.getAttribute("data-play-id");
                var playId = videoElement.getAttribute("data-user-id");
                if (userId.length > 0 && playId.length > 0) {
                    var logoutIdRequestVoList = {
                        userId: userId,
                        playId: playId
                    };
                    logoutPlayViewListVo.push(logoutIdRequestVoList);
                }
            });
            // 发送退出请求
            if (logoutPlayViewListVo.length > 0) {
                $.ajax({
                    url: "/hkCamera/logoutPlayViewAll",
                    dataType: "json",
                    contentType: "application/json",
                    async: true,
                    data: JSON.stringify(logoutPlayViewListVo),
                    type: "POST",
                    success: function (res) {
                        if (res.code === 200) {
                            layer.msg("退出所有预览成功");
                            videoElements.forEach(function (videoElement) {
                                var userId = videoElement.getAttribute("data-play-id");
                                var playId = videoElement.getAttribute("data-user-id");
                                if (userId.length > 0 && playId.length > 0) {
                                    // 重置当前 video
                                    videoElement.setAttribute("data-play-id", "");
                                    videoElement.setAttribute("data-user-id", "");
                                    videoElement.setAttribute("data-username", "");
                                    videoElement.setAttribute("data-password", "");
                                    videoElement.setAttribute("data-ip", "");
                                    videoElement.setAttribute("data-port", "");
                                    videoElement.pause(); // 暂停视频播放
                                    videoElement.src = ""; // 将视频源设置为空字符串
                                    // videoElement.load();  // 重新加载视频（可选，根据实际需求）
                                }
                            });
                        }
                    },
                    error: function () {
                        // 处理错误
                    }
                });
            } else {
                layer.msg("无播放预览");
            }
        })

        $("#fullScreen").click(function () {
            if (selectedVideo === null) {
                layer.alert('请选择一个窗口', function (index) {
                    layer.close(index);
                });
            } else {
                var video = document.getElementById(selectedVideo.id);
                var userId = video.getAttribute("data-play-id");
                var playId = video.getAttribute("data-user-id");
                if (userId.length > 0 && playId.length > 0) {
                    toggleFullScreen(video);
                } else {
                    layer.alert("请先登录预览");
                }
            }
        })

        function toggleFullScreen(videoElement) {
            if (!document.fullscreenElement &&
                !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
                if (videoElement.requestFullscreen) {
                    videoElement.requestFullscreen();
                } else if (videoElement.msRequestFullscreen) {
                    videoElement.msRequestFullscreen();
                } else if (videoElement.mozRequestFullScreen) {
                    videoElement.mozRequestFullScreen();
                } else if (videoElement.webkitRequestFullscreen) {
                    videoElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                }
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
            }
        }

    });

</script>
</body>
</html>